<template>
    <a-button-group class="btn-group">
        <span v-for="(item, index) in groupedList" :key="index">
            <a-dropdown
                v-if="item.type === 'seniorExport'"
                class="drop-down"
                placement="bottom"
                @visibleChange="getExportTemplateList"
                :get-popup-container="
                    triggerNode => {
                        return triggerNode.parentNode || document.body
                    }
                "
            >
                <template #overlay>
                    <a-menu class="drop-down__style">
                        <a-menu-item
                            v-for="(exportTemplateItem, exportTemplateItemIndex) in exportTemplate"
                            :key="exportTemplateItemIndex"
                            @click="handleExport(exportTemplateItem)"
                            >{{ exportTemplateItem.name }}</a-menu-item
                        >
                        <a-menu-item @click="handleAction(item.type, { type: 'templateManage', config: [] })"
                            ><a-button type="link">模板管理</a-button></a-menu-item
                        >
                    </a-menu>
                </template>
                <a-button type="primary">{{ item.buttonName }}<down-outlined /> </a-button>
            </a-dropdown>
            <a-button
                v-else-if="!item.showConfirm"
                :type="item.buttonType"
                :disabled="item.disabled"
                :class="item.class"
                @click="handleAction(item.type)"
            >
                {{ item.buttonName }}
            </a-button>
            <a-popconfirm
                v-else
                title="删除后不可恢复, 是否删除?"
                ok-text="确定"
                :class="item.class"
                cancel-text="取消"
                :disabled="item.disabled"
                @confirm="handleAction(item.type)"
            >
                <a-button :type="item.buttonType" :disabled="item.disabled">
                    {{ item.buttonName }}
                </a-button>
            </a-popconfirm>
        </span>
        <div v-show="groupOtherList.length" class="button-more">
            <a-dropdown placement="bottomRight">
                <a class="ant-dropdown-link"> 更多<down-outlined /> </a>
                <template #overlay>
                    <a-menu>
                        <a-menu-item v-for="(item, index) in groupOtherList" :key="index">
                            <a-dropdown
                                placement="bottom"
                                v-if="item.type === 'seniorExport'"
                                class="drop-down"
                                :get-popup-container="
                                    triggerNode => {
                                        return triggerNode.parentNode || document.body
                                    }
                                "
                            >
                                <template #overlay>
                                    <a-menu class="drop-down__style">
                                        <a-menu-item
                                            v-for="(exportTemplateItem, exportTemplateItemIndex) in exportTemplate"
                                            :key="exportTemplateItemIndex"
                                            @click="handleExport(exportTemplateItem)"
                                        >
                                            {{ exportTemplateItem.name }}
                                        </a-menu-item>
                                        <a-menu-divider />
                                        <a-menu-item
                                            @click="handleAction(item.type, { type: 'templateManage', config: [] })"
                                        >
                                            <a-button type="link"> 模板管理 </a-button>
                                        </a-menu-item>
                                    </a-menu>
                                </template>
                                <a-button type="primary"> {{ item.buttonName }}<a-icon type="down" /> </a-button>
                            </a-dropdown>
                            <a-button
                                v-else-if="!item.showConfirm"
                                type="link"
                                :disabled="item.disabled"
                                @click="handleAction(item.type)"
                            >
                                {{ item.buttonName }}
                            </a-button>
                            <a-popconfirm
                                v-else
                                title="删除后不可恢复, 是否删除?"
                                ok-text="确认"
                                cancel-text="取消"
                                @confirm="handleAction(item.type)"
                            >
                                <a-button type="link" :disabled="item.disabled"> {{ item.buttonName }} </a-button>
                            </a-popconfirm>
                        </a-menu-item>
                    </a-menu>
                </template>
            </a-dropdown>
        </div>
    </a-button-group>
</template>

<script>
    import { defineComponent, computed, ref, watch } from 'vue'
    import { cloneDeep } from '@/utils/index'

    export default defineComponent({
        name: 'OperateButton',
        props: {
            //按钮列表{ type: 'edit', buttonType: 'default', disabled: false,buttonName:''}
            buttonList: {
                type: Array,
                default: () => {
                    return []
                }
            },
            //表格分页器信息
            pageData: {
                type: Object,
                default: () => {
                    return {}
                }
            },
            //数据源id
            formId: {
                type: Number
            },
            //搜索项
            filter: {
                type: Object,
                default: () => {
                    return {}
                }
            },
            maxShow: {
                type: [Number, String],
                default: 2
            },
            exportByTemplateId: {
                type: Function,
                default: () => {
                    return undefined
                }
            },
            getExportTemplate: {
                type: Function,
                default: () => {
                    return null
                }
            },
            downloadExcel: {
                type: Function,
                default: () => {
                    return undefined
                }
            }
        },
        emits: ['action'],
        setup(props, { emit }) {
            const exportTemplate = ref([])
            const buttonType = ref('link')

            const maxShowBtn = computed(() => {
                return props.maxShow
            })
            const groupOtherList = computed(() => {
                const result = [...globalButtonList.value]
                return result.splice(maxShowBtn.value) || []
            })
            const groupedList = computed(() => {
                const result = [...globalButtonList.value]
                return result.slice(0, maxShowBtn.value) || []
            })
            /**
             * 模板导出
             * 直接根据config参数导出数据
             */
            const handleExport = config => {
                const queryParams = {
                    pageId: props.formId,
                    pageSize: props.pageData?.pageSize || 50,
                    filterCondition: props.filter
                }
                props.exportByTemplateId(config.id, queryParams).then(response => {
                    props.downloadExcel(response, config.name)
                })
            }
            const getExportTemplateList = () => {
                if (!props.formId) {
                    return
                }
                const data = {
                    pageNo: 1, // 分页页码
                    pageSize: 100, // 分页条数
                    sort: {
                        // 支持多排序
                    },
                    filter: {
                        // 过滤条件
                        pageId: props.formId, // 当前表单id
                        deleted: false
                    }
                }
                props.getExportTemplate(data).then(res => {
                    exportTemplate.value = res.data.content
                })
            }
            const globalButtonMap = {
                add: {
                    type: 'add',
                    buttonType: 'primary',
                    class: 'mr24',
                    showConfirm: false,
                    status: 'showAdd'
                },
                print: {
                  type: 'print',
                  buttonType: 'primary',
                  class: 'mr24',
                  showConfirm: false,
                  status: 'showPrint',
                },
                edit: {
                    type: 'edit',
                    buttonType: 'default',
                    class: 'mr24',
                    showConfirm: false,
                    disabled: false,
                    status: 'showEdit'
                },
                details: {
                    type: 'details',
                    buttonType: 'default',
                    class: 'mr24',
                    showConfirm: false,
                    disabled: false,
                    status: 'showDetails'
                },
                delete: {
                    type: 'delete',
                    buttonType: 'primary',
                    class: 'mr24',
                    showConfirm: true,
                    disabled: false,
                    status: 'showDelete'
                },
                export: {
                    type: 'export',
                    buttonType: 'primary',
                    class: 'mr24',
                    status: 'showExport',
                    showConfirm: false
                },
                import: {
                    type: 'import',
                    buttonType: 'primary',
                    class: 'mr24',
                    status: 'showImport'
                },
                seniorExport: {
                    type: 'seniorExport',
                    buttonType: 'primary',
                    status: 'showSeniorExport',
                    class: 'mr24'
                }
            }
            const globalButtonList = computed(() => {
                const global = cloneDeep(props.buttonList)
                global.map(item => {
                    const globalInfo = globalButtonMap[item.type]
                    return {
                        class: globalInfo.class,
                        status: globalInfo.status,
                        showConfirm: globalInfo.showConfirm,
                        ...item
                    }
                })
                return global
            })

            const handleAction = (type, other = {}) => {
                emit('action', type, other)
            }
            watch(
                () => props.formId,
                () => {
                    getExportTemplateList()
                },
                { immediate: true }
            )
            return {
                buttonType,
                handleAction,
                handleExport,
                exportTemplate,
                groupedList,
                groupOtherList,
                getExportTemplateList
            }
        }
    })
</script>
<style lang="less" scoped>
    .btn-group {
        gap: 8px;
    }

    .button-more {
        line-height: 30px;
    }

    .drop-down__style {
        max-height: 170px;
        overflow: auto;
    }
    .mr24 {
        margin-right: 24px;
    }

    .pop_info {
        margin: 0px;
    }

    .@{ant-prefix}-btn-group .@{ant-prefix}-btn {
        border-radius: 4px;
    }
</style>
